<template>
  <!-- <el-form-item label="一次上传多个附件-带回显"> -->
  <el-upload
      :class="disabled ? 'fileUpdate nonebox' : 'fileUpdate'"
      action
      multiple
      :auto-upload="false"
      :on-change="changeFileLength"
      :on-preview="onPreview"
      :file-list="formlist"
      :on-remove="onRemove"
      :limit="20"
      :on-exceed="handleExceed"
  >
      <div class="upBox" v-if="!disabled">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="update-text">限制10M</div>
      </div>
  </el-upload>
  <!-- </el-form-item> -->
</template>
<script>
// import { Message } from "elem";
import { ElMessage, ElMessageBox } from 'element-plus'
// import { Message } from '@/utils/commen.js'
export default {
  props: {
      disabled: {
          //是否展示上传按钮
          type: String,
          default: false,
      },
      formlist: {
          //文件列表-展示
          type: Array,
          default: [],
      },
  },
  data() {
      return {};
  },
  methods: {
      // 文件列表改变
      async changeFileLength(singleFile, fileLists) {
          // console.log(fileList,singleFile);
          let promis = [];
          let formData = new FormData();
          fileLists.forEach((file) => {
              if (file.raw) {
                  this.ifFileBig(file) && formData.append("files", file.raw);
              } else {
                  promis.push(
                      this.getFileFromUrl(file.fileBaseUrl, file.fileName)
                  );
              }
          });

          await Promise.all(promis).then((response) => {
              response.forEach((item) => formData.append("files", item));
          });

          //大文件筛选
          let fileList = fileLists.filter((item) => {
              return this.ifFileBig(item) || item.url;
          });
          this.$emit("updateFile", { fileList, resultFile: formData });
      },

      //文件移除
      onRemove(file, fileList) {
          this.changeFileLength("", fileList);
      },
      //判断文件大小
      ifFileBig(file) {
          let size = file.size / 1024 / 1024;
          if (size > 10) {
              // this.$message.error(`${file.name}大小超过50M`)
              if (
                  document.getElementsByClassName("el-message").length === 0
              ) {
                ElMessage({
                      message: `${file.name}大小超过10M`,
                      type: "error",
                  });
              }

              return false;
          } else {
              return true;
          }
      },
      //url转换file
      getFileFromUrl(url, fileName) {
          return new Promise((resolve, reject) => {
              var blob = null;
              var xhr = new XMLHttpRequest();
              xhr.open("GET", url);
              let arr = url.split(".");
              let type = "." + arr[arr.length - 1];

              xhr.setRequestHeader("Accept", type);
              xhr.responseType = "blob";
              // 加载时处理
              xhr.onload = () => {
                  // 获取返回结果
                  blob = xhr.response;
                  let file = new File([blob], fileName, {
                      type: type,
                      webkitRelativePath: url,
                  });
                  // 返回结果
                  resolve(file);
              };
              xhr.onerror = (e) => {
                  reject(e);
              };
              // 发送
              xhr.send();
          });
      },

      //点击文件下载
      onPreview(file) {
          // console.log(file);
          let link = document.createElement("a");
          link.href = file.url || URL.createObjectURL(new Blob([file])); //url文件地址
          link.download = file.name; //加上下载的文件
          link.click();
          link.remove();
      },

      //文件数量限制
      handleExceed(files, fileList) {
          this.$message.warning(
              `当前限制选择 20 个文件，本次选择了 ${
                  files.length
              } 个文件，共选择了 ${files.length + fileList.length} 个文件`
          );
      },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.fileUpdate {
  .upBox {
      display: flex;
      height: 32px;
      margin-bottom: 10px;
      .update-text {
          font-size: 14px;
          font-weight: normal;
          color: #9d9d9d;
          line-height: 32px;
          margin-left: 20px;
      }
  }
  :deep(.el-upload-list) {
      width: 300px;
  }
}
.nonebox {
  :deep(.el-upload) {
      display: none;
  }
  :deep(.el-upload-list__item:hover .el-icon-close) {
      display: none;
  }
}
</style>
